<template>
  <div id='navlist' v-show="show">
      <div class="usernav">
        <div class="nav">
          <div class="logo"><img src="../assets/image/logo.png"></div>          
            <!-- <router-link class="box" tag="div" :to="'userCenter'">
                <div class="left"  @click="navout"><img src="../assets/image/account.png"></div><div class="right"><span>个人中心</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'notice'">
                <div class="left"><img src="../assets/image/gonggao.png"></div><div class="right"><span>平台公告</span><span>14</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'coinmanage'">
                <div class="left"><img src="../assets/image/coin.png"></div><div class="right"><span>金币管理</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'upgrade'">
                <div class="left"><img src="../assets/image/shengji.png"></div><div class="right"><span>我要升级</span></div>
            </router-link>
            <router-link class="box" tag="div" to="">
                <div class="left"><img src="../assets/image/wujinbi.png"></div><div class="right"><span>五级进币</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'shenhe'">
                <div class="left"><img src="../assets/image/shenghe.png"></div><div class="right"><span>升级审核</span><span>14</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'huiyuan'">
                <div class="left"><img src="../assets/image/manage.png"></div><div class="right"><span>会员管理</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'password'">
                <div class="left"><img src="../assets/image/verify.png"></div><div class="right"><span>安全中心</span></div>
            </router-link>
            <router-link class="box" tag="div" :to="'feedbackLog'">
                <div class="left"><img src="../assets/image/message.png"></div><div class="right"><span>信息反馈</span></div>
            </router-link> -->
            <div class="box" @click="Tonotice">
                <div class="left"><img src="../assets/image/gonggao.png"></div><div class="right"><span>平台公告</span></div>
            </div>
            <div class="box" @click="TouserCenter">
                <div class="left"  @click="navout"><img src="../assets/image/account.png"></div><div class="right"><span>个人中心</span></div>
            </div>
            <div class="box" @click="Tocoinmanage">
                <div class="left"><img src="../assets/image/coin.png"></div><div class="right"><span>金币管理</span></div>
            </div>
            <div class="box" @click="Toupgrade">
                <div class="left"><img src="../assets/image/shengji.png"></div><div class="right"><span>我要升级</span><span v-if="my>0">{{my}}</span></div>
            </div>
            <div class="box" @click="Toshenhe">
                <div class="left"><img src="../assets/image/shenghe.png"></div><div class="right"><span>升级审核</span><span  v-if="other>0">{{other}}</span></div>
            </div>
            <div class="box" @click="Tohuiyuan">
                <div class="left"><img src="../assets/image/manage.png"></div><div class="right"><span>会员管理</span><span  v-if="huiyuan>0">{{huiyuan}}</span></div>
            </div>
            <div class="box" @click="Topassword">
                <div class="left"><img src="../assets/image/verify.png"></div><div class="right"><span>安全中心</span></div>
            </div>
            <div class="box" @click="TofeedbackLog">
                <div class="left"><img src="../assets/image/message.png"></div><div class="right"><span>站内信</span><span  v-if="huiyuan+other+my>0">{{huiyuan+other+my}}</span></div>
            </div>
            <div class="box" @click="wuji">
                <div class="left"><img src="../assets/image/wujinbi.png"></div><div class="right"><span>高级玩场</span></div>
            </div>
            <com-button :click="signout">退出登录</com-button>
        </div>
        <div class="navhide"  @click="navout"></div>
      </div>
  </div>
</template>

<script>
export default {
  name: "navlist",
  data() {
    return {
      huiyuan: '',
      my: '',
      other: '',
      // 是否顯示
      show: false,
      // 是否進入
      showIn: false,
      // 是否彈出
      showOut: false,
      // 是否在過程中
      showIng: false,
      // 動畫方式
      animateStyle: [
        {
          in: "fadeInLeft",
          out: "fadeOutRight"
        },
        {
          in: "fadeInUp",
          out: "fadeOutUp"
        }
      ],
      // 動畫方式
      animateIndex: 0
    };
  },

  computed: {},

  created() {
    this.$bus.$on("navlist", this.navshow);
  },

  mounted() {
    
  },

  methods: {
    loading() {
      this.axios.post("apireg/home_page", {
          token: this.token()
        })
        .then(({ data }) => {
          console.log(data);
        if (data.code === "200") {
            this.huiyuan = data.data.huiyuan;
            this.my = data.data.my;
            this.other = data.data.other;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    TouserCenter() {
      this.navout();
      this.$router.push("userCenter");
    },
    Tonotice() {
      this.navout();
      this.$router.push("notice");
    },
    wuji() {
      this.navout();
      this.$router.push("clause");
      this.$bus.$emit("toast", "功能开发中，敬请期待！");
    },
    Toupgrade() {
      this.navout();
      this.$router.push("upgrade");
    },
    Tocoinmanage() {
      this.navout();
      this.$router.push("coinmanage");
    },
    Toshenhe() {
      this.navout();
      this.$router.push("shenhe");
    },
    Tohuiyuan() {
      this.navout();
      this.$router.push("huiyuan");
    },
    Topassword() {
      this.navout();
      this.$router.push("password");
    },
    TofeedbackLog() {
      this.navout();
      this.$router.push("feedbackLog");
    },

    signout() {
      this.navout();
      localStorage.removeItem("token");
      this.$router.push('login');      
      this.$bus.$emit("toast", "退出成功");
    },
    navshow(data) {
      if (this.token()) {
      // 加载信息数
      this.loading();
      } 
      if (this.showIng) return false;
      this.animateIndex = Math.floor(Math.random() * 2);
      this.showIng = true;
      this.show = true;
      this.showIn = true;
    },
    navout(data) {
      if (!this.showIng) return false;
      this.animateIndex = Math.floor(Math.random() * 2);
      this.showOut = false;
      this.show = false;
      this.showIng = false;
    }
  }
};
</script>
<style lang='scss' scoped>
#navlist {
  .usernav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-start;
    .nav {
      // width: 550px;
      height: 100%;
      overflow: scroll;
      padding: 42px 32px;
      box-sizing: border-box;
      background: rgba(255, 255, 255, 1);
      .logo {
        width: 150px;
        height: 150px;
        img {
          height: 100%;
        }
      }
      p:nth-of-type(1) {
        margin-bottom: 62px;
        font-size: 36px;
        text-align: left;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(10, 137, 172, 1);
        line-height: 50px;
      }
      .box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .left {
          width: 37px;
          height: 40px;
          img {
            width: 100%;
          }
        }
        .right {
          width: 426px;
          margin-left: 20px;
          border-bottom: 1Px solid #0a89ac;
          span {
            font-size: 32px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(10, 137, 172, 1);
            line-height: 102px;
          }
          span:nth-of-type(2) {
            display: inline-block;
            vertical-align: middle;
            margin-left: 24px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 16px;
            background: rgba(184, 25, 25, 1);
            font-size: 22px;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
    .navhide {
      width: 200px;
      height: 100%;
      background: rgba(88, 46, 46, 0);
    }
  }
}
</style>